<template>
  <div style="width: 1000px;height: 600px;" id="myDiv">
  </div>
</template>

<script>
import * as echarts from '../../assets/echarts.min.js'
import axios from 'axios'
import { onMounted } from 'vue'

export default {
  name: 'one4',
  setup() {

    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit()  // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      var url = '/api/data/list2'
      // 请求后端接口
      axios.get(url).then(res => {

        let citys = ['布维岛','韦奇岛','唐纳岛','乌拉圭','秘鲁']
        let buys = [535.48958545,547.9834394,599.3437832,406.456732,515.09843]

        console.log(citys);
        console.log(buys);

        // 图表的初始化，放在数据获取成功后
        init(citys,buys);

      })


    };

    // 初始化图表
    const init = (citys,buys) => {
      var options = {
        title:{
          text:'条形图展示2020年平均消费额最高的5个省份'
        },
        xAxis:{
          name:'平均消费额'
        },
        yAxis:{
          data:citys,
          name:'省份'
        },
        series:{
          data:buys,
          type:'bar'
        }
      }
 
      let myChart = echarts.init(document.getElementById("myDiv"));
      myChart.setOption(options)

    }




  }




}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
